When frames were first introduced by Netscape they became a fad, everyone wanted
frames on their site even though the majority of browsers didn't support them.
Now that almost all browsers can handle frames and the initial obsession has
worn off, they are used more sensibly, although they can still cause problems if
not handled correctly.
What are frames?
Until now we have only looked at displaying a single document in the browser
window. Frames are a mean of splitting the window into a number of smaller
sub-windows, each displaying a different document. There are two main benefits
to this, you can set up part of the display with items that you want on screen
at all times, like a menu bar or banner, and have the text of the page scrolling
in a separate frame. Secondly, you can reduce download and rendering times.
Using the table method of displaying a menu bar discussed last month, the whole
page, including menu bar, has to be downloaded before the browser can render it.
With frames only the part of the page that has changed need to be downloaded and
it can start to display as soon as it starts to download rather than waiting for
the complete table.
However, there are disadvantages associated with frames. More than any other
layout tool, they are sensitive to individual browser setups, see the boxout for
the sort of problems that can occur with frames.
The Top Level
As a framed display consists of several HTML documents in the same window, the
"top level" page only contains formatting and links to the frames to be
displayed. Here's a basic example
<HTML>
<HEAD>
<TITLE>Our first attempt at frames</TITLE>
</HEAD>
<FRAMESET ROWS="80,*" COLS="100%">
<FRAME SRC="banner.html" NAME="banner">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</HTML>
The first thing to notice is that there is no <BODY> container, this document
has no displayable content, it simply sets up the frames used to display other
documents. The first tag is FRAMESET, which informs the browser of the number
and size of frames. In this case we have split the browser window into two rows,
the first is 80 pixels high and the second occupies the rest of the window. The
size can be given in either pixels or as a percentage, normally you would use
pixels when using a frame to display an image of known size. The * has the same
meaning as with table sizes, it represents an equal portion of the remaining
area. For example, <FRAMESET ROWS="100%" COLS="*,3*,*"> would split the browser
window into three columns with the centre one three times the width of the other
two.
For each frame you specify its contents and other attributes with the <FRAME>
tag. The available attributes are
SRC The URL of the document to be loaded into the frame.
NAME A name for the frame, used in links.
FRAMEBORDER The size of border to give the frame, in pixels.
MARGINWIDTH The amount of space to leave between the sides of the frame and its contents.
MARGINHEIGHT Space between the top and bottom of the frame and the contents.
NORESIZE Supposed to prevents the user resizing the frames, although some
browsers ignore this to retain user control.
SCROLLING Determines whether a frame has scroll bars. The default is AUTO,
the frame gets scroll bars if the contents won't fit entirely in
the visible window. YES and NO force scrollbars on and off
respectively. It's very rare to find a good reason for using this.
The first example displayed a banner at the top of the page that stayed put
while scrolling the rest of the page, this is useful for advertising or
maintaining the "corporate image" of a page while it's being scrolled. The other
common use of frames is to provide a fixed menu bar, either at the top or the
side of the page. My preference here is for a menu at the side, the computer
screen is already too wide and too short in comparison with what we are most
used to reading, removing space from the top or bottom of the page only makes
this worse. However, using a side menu still leaves plenty of options, such as
the traditional row of buttons down the left side of the window or a set of tab
images on the right, giving the appearance of a reference book.
We've already seen that each frame contains a separate HTML document, this means
that when you click on a link within a frame, the new URL is loaded into that
frame. If you have a menu bar, this is exactly what you don't want, consider
this example where the main window contains
<FRAMESET ROWS="100%",COLS="150,*">
<FRAME SRC="menu.html" NAME="menu">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
and menu.html contains
<A HREF="links.html"><IMG SRC="links.gif" WIDTH=...></A>
The idea is to load your links page when the button is clicked, but this will
load the page into the menu frame leaving the main frame untouched. The solution
lies in the NAME attribute of FRAME and the TARGET attribute of A.
<A HREF="links.html" TARGET="main"><IMG SRC="links.gif" WIDTH=...></A>
will now load the links page into the main frame, leaving the menu
untouched.
There are also four special names defined for TARGET, all starting with an
underscore to avoid clashes with any names you may define yourself, they are:
_blank Opens a new browser window to display the URL, leaving the original
page unchanged in the old window
_self Refers to the current frame
_parent Refers the the frame containing the current frame, or the current
frame itself if it has no parent
_top Refers to the whole browser window
If all, or most, links in a document refer to the same frame, you can make hat
frame the default by including <BASE TARGET="main"> in the <HEAD> section. When
linking to another site, make sure you include a TARGET="_top", otherwise that
site will appear within a frame on your site. you may also want to include a
link on your home page to escape from a frame in case someone reaches your site
via a link that doesn't have a correct TARGET. Try adding this to the bottom of
your page to reload your home page into the full browser window.
Stuck in a frame? <A HREF="home.html" TARGET="_top">Escape now</A>.
There is no frames equivalent of the tables COLSPAN and ROWSPAN attributes, but
you can create more complex table layouts by nesting frames, a FRAMESET tag can
include further FRAMESET tags as well as FRAME tags. However, this can make site
navigation control and navigation even more complex and should only be used when
necessary, and with great care.
Staying compatible
Some browsers are not capable of displaying frames, and some users have frame
display disabled. In either case they will only see an empty window since the
main document has no content other than the FRAMESET. The solution to this uses
the feature of HTML that a browser will skip any tag or attribute it does not
know about. The frames specification defines the <NOFRAMES> container to be
completely ignored by any browser displaying frames, a non-frames browser won't
understand his so will skip the tag and display it's content as any other HTML.
This way you can include content to be shown when frames are not available to
the user.
It is important that you use this, otherwise you risk locking users out of your
site. A list of links to the main parts of your site should be considered the
minimum, while some sites make full use of NOFRAMES to give frames and
non-frames versions of the site. See http://www.wirenet.co.uk either online or
on the CD for an example of the latter.
Boxouts
=======
Disadvantages of frames
Every browser setup can display the same HTML differently, in some cases the
differences are trivial but with frames they can be immense. For this reason it
is important to test a frames site on as many browser configurations as
possible, not only different browsers but different screenmodes too. That menu
bar down the side of your page, sized to fit a column of image buttons, may look
perfect on your 800x600 screen. Try viewing it on a 640x480 or 640x256 screen
and you may find the column of buttons is taller than the screen so the browser
has added a scrollbar to the frame, completely messing up your previously ideal
layout.
Another minefield for frames users is the behaviour of the standard browser
navigation buttons. These were designed to work on the whole window, if the HTML
in one of the frames is changed and the user presses reload, the change may not
show up if only the top level page is reloaded.
All of this should be carefully considered before deciding to use frames.
Character entities
HTML is plain text, using certain characters to define tags and markup, so what
happens if you want to use those characters within your text? If you have
something like
if a<b or c>d then
in your HTML, the browser will try to interpret <b or c> as a tag, not recognise
it and simply show "if a d then". The solution is the character entity, a string
starting with "&" and ending with ";" containing a mnemonic for the character to
be used. The common ones are
< <
> >
" "
& &
£ £
non-breaking space, used to prevent a phrase being broken over
two lines, use with care
© © (copyright symbol)
® ® (trademark symbol)
&#xxx; ASCII character xxx
The full list of entities is in the HTML 4.0 documentation on the CD.
Figure 1: Our first example, using a frame to keep a banner at the top of the page
Figure 2: The menu example from last month, done with frames instead of tables
Figure 3: Nested frames are possible, but use with care